{include file="common/head"}
<style>
    #panelFake {
        display: none;
    }

    .hide {
        display: none;
    }
</style>
<div class="search-container layui-form layui-padding-4" lay-filter="search">
    <div class="layui-inline">
        <div class="layui-input-wrap">
            <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-read"></i>
            </div>
            <input type="text" name="fake" id="fake" value="" placeholder="卡密" class="layui-input" lay-affix="clear">
        </div>
    </div>
    <div class="layui-inline">
        <div class="layui-clear">
            <button style="float: right;" class="layui-btn layui-btn-sm layui-bg-blue" id="search">搜索</button>
        </div>
    </div>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
   <button class="layui-btn layui-btn-sm layui-bg-black" id="dropdownButton">
        操作 
        <i class="layui-icon layui-icon-down layui-font-12"></i>
      </button>
    <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="delCheck">删除选中</button>
  </div>
</script>

<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
  </div>
</script>
<script type="text/html" id="getFake">
    <form class="layui-form layui-padding-3 layui-form-pane" action="" lat-filter="apply">
    <div class="layui-form-item">
        <label class="layui-form-label">提取卡密 *</label>
        <div class="layui-input-block">
            <input type="number" name="addNum" autocomplete="off" placeholder="请输入卡密提取数量" lay-verify="required"
                class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">卡密类型 *</label>
        <div class="layui-input-inline">
            <select name="type" id="type">
                <option value="0">积分</option>
                <option value="1">VIP时长</option>
                <option value="2">商品卡密</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item hide" id="goodLis">
        <label class="layui-form-label">对应商品</label>
        <div class="layui-input-inline">
            <select name="good_id" id="type" lay-search="">
                {volist name="goodList" id="good"}
                <option value="{$good.id}">{$good.good_name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item hide" id="vip_time">
        <label class="layui-form-label">会员时长 *</label>
        <div class="layui-row">
            <div class="layui-col-xs4">
                <input type="number" name="vip_num" autocomplete="off" placeholder="数量" class="layui-input">
            </div>
            <div class="layui-col-xs4">
                <select name="vip_time_type" id="">
                    <option value="1">天</option>
                    <option value="2">月</option>
                    <option value="3">年</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="score">
        <label class="layui-form-label">积分数量 *</label>
        <div class="layui-input-block">
            <input type="number" name="score" autocomplete="off" placeholder="请输入积分数量" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-sm layui-bg-blue" lay-submit lay-filter="submit">提交</button>
    </div>
    <div class="layui-panel layui-padding-5" id="getFakeLis">
    </div>
    <div style="text-align: right;">
        <button type="button" id="copyFake" class="layui-margin-3 layui-btn layui-btn-sm layui-bg-black">复制卡密</button>
    </div>
</form>
</script>
<script type="text/html" id="importFake">


</script>
{include file="common/bottom"}
<script>
    layui.use(function () {
        var table = layui.table;
        var dropdown = layui.dropdown;
        var form = layui.form;
        var $ = layui.$
        $('#search').click(() => {
            let fake = $('#fake').val()
            if (fake == '') {
                table.reload('test', { where: { type: '' } })
            } else {
                table.reload('test', {
                    where: {
                        fake: fake
                    },
                })
            }

        })
        function copyToClipboard(text) {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('复制成功');
        }

        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/admin/fake/list',
            toolbar: '#toolbarDemo',
            parseData: function (res) { // res 即为原始返回的数据
                return {
                    "code": res.code, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "count": res.data.total, // 解析数据长度
                    "data": res.data.data
                };
            },
            height: 'full',
            cellMinWidth: 80,
            totalRow: true, // 开启合计行
            page: true,
            cols: [[
                { type: 'checkbox' },
                { field: 'id', width: 80, title: 'ID', sort: true },
                { field: 'fake', title: '卡密', width: 130 },
                { field: "good_name", title: '对应商品', width: 130,templet : function(d){
                    if(!d.good_id) return '------';
                    else return d.good_name
                } },
                {
                    field: 'type', title: '类型', width: 130, templet: function (d) {
                        if (d.type == 0) {
                            return `<span class="layui-badge-rim">积分</span>`
                        } else if (d.type == 1) {
                            return `<span class="layui-badge-rim">VIP时长</span>`
                        } else if (d.type == 2) {
                            return `<span class="layui-badge-rim">商品卡密</span>`
                        }
                    }
                },
                { field: 'num', title: '积分/时长数量', width: 130 },
                {
                    field: 'vip_time_type', title: '时长类型', width: 130, templet: function (d) {
                        if (d.type == 1) {
                            if (d.vip_time_type == 1) {
                                return `<span class="layui-badge-rim">天卡</span>`
                            } else if (d.vip_time_type == 2) {
                                return `<span class="layui-badge-rim">月卡</span>`
                            } else if (d.vip_time_type == 3) {
                                return `<span class="layui-badge-rim">年卡</span>`
                            }
                        }
                        else {
                            return  '------';
                        }
                    }
                },
                {
                    field: 'status', title: '状态', width: 130, templet: function (d) {
                        if (d.status == 1) {
                            return `<span class="layui-font-red layui-font-12">已使用</span>`
                        } else if (d.status == 0) {
                            return `<span class="layui-font-green layui-font-12">未使用</span>`
                        } else if (d.status == 2) {
                            return `<span class="layui-font-blue layui-font-12">已提取</span>`
                        }
                    }
                },
                { field: 'create_time', title: '生成时间', width: 150 },
                { field: 'use_time', title: '使用时间', width: 150 },
                { title: '操作', width: 134, minWidth: 125, toolbar: '#barDemo' }
            ]],
            done: function () {
                var id = this.id;
                dropdown.render({
                    elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
                    data: [{
                        id: 'add',
                        title: '添加卡密'
                    }, {
                        id: 'get',
                        title: '提取卡密'
                    }, {
                        id: 'import',
                        title: '导入卡密'
                    },],
                    // 菜单被点击的事件
                    click: function (obj) {
                        var checkStatus = table.checkStatus(id)
                        var data = checkStatus.data; // 获取选中的数据
                        switch (obj.id) {
                            case 'add':
                                layer.open({
                                    type: 2,
                                    area: ['80%', '80%'],
                                    title: '添加卡密',
                                    resize: false,
                                    shadeClose: true,
                                    closeBtn: 0,
                                    content: '/admin/fake/add'
                                    ,success:(res) => {
                                        
                                    }
                                })
                                break
                            case 'get':
                                layer.open({
                                    type: 1,
                                    area: ['80%', '80%'],
                                    title: '提取卡密',
                                    resize: true,
                                    shadeClose: true,
                                    closeBtn: 0,
                                    content: $('#getFake').html()
                                    , success: () => {
                                        form.render();
                                        $('#type ~ .layui-form-select > .layui-anim-upbit > dd').click(() => {
                                            $('#goodLis').hide()
                                            $('#score').hide()
                                            $('#vip_time').hide()
                                            setTimeout(() => {
                                                let type = $('#type').val()
                                                if (type == 2) {
                                                    $('#goodLis').show()
                                                } else if (type == 0) {
                                                    $('#score').show()
                                                } else if (type == 1) {
                                                    $('#vip_time').show()
                                                }
                                            }, 200)
                                        })
                                        $('#copyFake').click(function () {
                                            copyToClipboard($('#getFakeLis')[0].innerText)
                                        })
                                        form.on('submit(submit)', (data) => {
                                            var field = data.field;
                                            if (field.type == 1) {
                                                delete field.score
                                                delete field.good_id
                                            } else if (field.type == 0) {
                                                delete field.vip_time
                                                delete field.vip_time_type
                                                delete field.good_id
                                            } else if (field.type == 2) {
                                                delete field.vip_time
                                                delete field.vip_time_type
                                                delete field.score
                                            }
                                            $.ajax({
                                                url: '/admin/fake/getFake'
                                                , type: 'get'
                                                , dataType: 'json'
                                                , data: field
                                                , success: (res) => {
                                                    if (res.code) {
                                                        $('#getFakeLis').empty()
                                                        if (res.data == '') {
                                                            layer.msg('什么也没有！')
                                                        } else {
                                                            $('#getFakeLis').append(res.data)
                                                            layer.msg('操作成功')
                                                        }
                                                    } else {
                                                        layer.msg(res.message, { icon: 5 })
                                                    }
                                                }
                                            })
                                            return false;
                                        })
                                    }
                                })
                                break
                            case 'import':
                                layer.open({
                                    type: 2,
                                    area: ['80%', '80%'],
                                    title: '导入卡密',
                                    resize: false,
                                    shadeClose: true,
                                    closeBtn: 1,
                                    content: '/admin/fake/import'
                                })
                                break
                        }
                    }
                })

            },
            error: function (res, msg) {
                console.log(res, msg)
            }


        });

        // 工具栏事件
        table.on('toolbar(test)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'add':

                    break
                case 'delCheck':
                    var data = checkStatus.data;
                    let idArr = ''
                    data.forEach((el) => {
                        idArr += el.id + ','
                    })
                    layer.confirm('确定要删除选中吗？', (res) => {
                        $.post('/admin/fake/del', { id: idArr }, (res) => {
                            if (res.code == 200) {
                                layer.msg('删除成功')
                                table.reload('test')
                            } else {
                                layer.msg('删除失败')
                            }
                        })
                    })
                    break
                case 'importFake':

                    break;
                case 'get':
                    layer.open({
                        type: 1,
                        area: ['80%', '80%'],
                        title: '提取卡密',
                        resize: true,
                        shadeClose: true,
                        closeBtn: 0,
                        content: $('#getFake').html()
                        , success: () => {
                            form.render();
                            $('#type ~ .layui-form-select > .layui-anim-upbit > dd').click(() => {
                                $('#goodLis').hide()
                                $('#score').hide()
                                $('#vip_time').hide()
                                setTimeout(() => {
                                    let type = $('#type').val()
                                    if (type == 2) {
                                        $('#goodLis').show()
                                    } else if (type == 0) {
                                        $('#score').show()
                                    } else if (type == 1) {
                                        $('#vip_time').show()
                                    }
                                }, 200)
                            })
                            $('#copyFake').click(function () {
                                copyToClipboard($('#getFakeLis')[0].innerText)
                            })
                            form.on('submit(submit)', (data) => {
                                var field = data.field;
                                if (field.type == 1) {
                                    delete field.score
                                    delete field.good_id
                                } else if (field.type == 0) {
                                    delete field.vip_time
                                    delete field.vip_time_type
                                    delete field.good_id
                                } else if (field.type == 2) {
                                    delete field.vip_time
                                    delete field.vip_time_type
                                    delete field.score
                                }
                                $.ajax({
                                    url: '/admin/fake/getFake'
                                    , type: 'get'
                                    , dataType: 'json'
                                    , data: field
                                    , success: (res) => {
                                        if (res.code) {
                                            $('#getFakeLis').empty()
                                            if (res.data == '') {
                                                layer.msg('什么也没有！')
                                            } else {
                                                $('#getFakeLis').append(res.data)
                                                layer.msg('操作成功')
                                            }
                                        } else {
                                            layer.msg(res.message, { icon: 5 })
                                        }
                                    }
                                })
                                return false;
                            })
                        }
                    })
                    break
            };
        });


        // 触发单元格工具事件
        table.on('tool(test)', function (obj) { // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if (obj.event === 'edit') {
            } else if (obj.event == 'del') {
                layer.confirm(`确定要删除该卡密吗`, () => {
                    $.get('/admin/fake/del/', { id: data.id }, (res) => {
                        if (res.code == 200) {
                            layer.msg('删除成功', { time: 500 })
                            obj.del()
                        } else {
                            layer.msg('删除失败', { time: 500 })
                        }
                    })
                })
            }
        });
        // 复选框 批量删除
        table.on('checkbox(test)', function (obj) {
        });
        // 行单击事件
        table.on('row(test)', function (obj) {
            //layer.closeAll('tips');
        });
        // 行双击事件
        table.on('rowDouble(test)', function (obj) {
        });

        // 单元格编辑事件
        table.on('edit(test)', function (obj) {
            var field = obj.field; // 得到字段
            var value = obj.value; // 得到修改后的值
            var data = obj.data; // 得到所在行所有键值
            // 值的校验
            if (field == 'sort') {
                var regPos = /^[0-9]+.?[0-9]*/
                if (!regPos.test(obj.value)) {
                    layer.tips('输入的排序格式应为数字', this, { tips: 1 });
                    return obj.reedit();
                } else {
                    $.ajax({
                        url: '/admin/link/update'
                        , type: 'post'
                        , data: {
                            id: data.id
                            , sort: obj.value
                        }
                        , dataType: 'json'
                        , success: (res) => {
                            if (res.code == 200) {
                                layer.msg('修改成功', { icon: 6 })
                            } else {
                                layer.msg('修改失败', { icon: 5 })
                            }
                        }
                    })
                    table.reload('test', {
                        where: {
                        }
                    })
                }
            }

            layer.msg('编辑成功', { icon: 1 });

            // 其他更新操作
            var update = {};
            update[field] = value;
            obj.update(update);
        });
    });

</script>
</body>

</html>